<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./highlight/styles/agate.css"> 
    <script src="./highlight/highlight.pack.js"></script> 
    <script > hljs.initHighlightingOnLoad();</script> 
</head>
<body>
    <div id="app">
        <my-pre :init-string="strings"></my-pre>
    </div>
    
    <script>
        
        function hereDoc(f) {　
                    return f.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, '');
                };

        Vue.component('my-pre',{
            props:{
                initString:{
                    type:String,
                    default:''
                }
            },
            template:'\
                    <div>\
                        <pre>\
                               <code class="javascript hljs" style="font-size:16px;width:1000px;font-family: Courier, monospace">{{transdata}}\
                                </code>\
                        </pre>\
                    </div>',
            data(){
                return {
                        transdata:this.initString
                }
            },
        });

        new Vue({
            el: '#app',
            data: {
                strings:hereDoc(function(){/*
        Vue.component('my-com3',{
            props:['value'],
            template:'<div><input :value="value" @input="updateValue" id="inp"><label for ="inp">这个是组件</label></div>',
            methods:{
                updateValue(event){
                    this.$emit('input',event.target.value);
                }
            }
        })
                */})
                
            }
        })
    </script>
    
</body>
</html>